<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/index1.css">
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <script src="js/accordion.js" type="text/javascript"></script>
    <script src="js/lrtk.js" type="text/javascript"></script>
    <script>document.createElement("top")</script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <title>产品列表页</title>
</head>

<body>
<head>
    <!--头部-->
    <top>
        <section class="seck">
            <div class="register_login">
                <em>您好，</em>
                <a href="login.html">会员登录</a>
                <a href="register.html">快速注册</a>
            </div>
            <div class="vip_center">
                <a href="user_center.html">用户中心</a>
                <a href="#">商户中心</a>
                <a href="#">帮助</a>
            </div>
        </section>
    </top>

    <!--header-->
    <div class="maxbj1">
        <header>
            <b class="logo"><img src="images/logo1.png"></b>
            <search>
                <div>
                    <input type="text" placeholder="查询关键词..." id="search_title" required style=" width:440px; height:30px; text-indent:2em; float:left; box-shadow:none">
                    <button onclick="search()">搜索</button>
                </div>
            </search>
            <div class="sping_car">
                <b></b>
                <a href="Cart.html"><em>我的购物车</em></a>
            </div>
        </header>
    </div>

    <!--导航-->
    <section class="dao_hang">
        <nav>
            <!--结束-->
            <div class="dao_list">
                <a href="index.html">首页</a>
                <a href="#">超级福包</a>
                <a href="#">母婴之家</a>
                <a href="#">厨房用品</a>
                <a href="#">生活必备</a>
                <a href="#">试吃申请</a>
                <a href="#">最新公告</a>
            </div>
        </nav>
    </section>
</head>
<!--产品列表样式-->
<div class="Inside_pages">
    <!--位置-->
    <div id="Filter_style">
        <div class="Location_link">
            <em></em><a href="index.html">首页</a> < <a>手机</a>
        </div>
        <!--条件筛选样式-->
        <div class="Filter" id="Filter">
            <div class="Filter_list clearfix">
                <div class="Filter_title"><span>分类：</span></div>
                <div class="p_f_name">
                    <a href="#">手机</a>
                </div>
            </div>

            <div class="Filter_list clearfix">
                <div class="Filter_title"><span>服务优惠：</span></div>
                <div class="p_f_name">
                    <a href="#">仅看有货</a>
                    <a href="#">分期免息</a>
                    <a href="#">优惠商品</a>
                </div>
            </div>

            <div class="Filter_list clearfix">
                <div class="Filter_title"><span>屏幕尺寸：</span></div>
                <div class="p_f_name">
                    <a href="#">6.0-6.5英寸</a>
                    <a href="#">6.5英寸以上</a>
                </div>
            </div>

            <div class="Filter_list clearfix">
                <div class="Filter_title"><span>更多选项：</span></div>
                <div class="p_f_name">
                    <a href="#">运行内存</a>
                    <a href="#">存储容量</a>
                    <a href="#">上市时间</a>
                </div>
                </div>
            </div>
        </div>

        <div class="currency">
            <ul>
                <li v-for="(good,i) in list" style="margin-top: 10px">
                    <img :src="good.goodImg" style=" margin:0 auto; display:block; width:220px; height:220px"></a>
                    <light1>
                        <img src="images/saoguang.png">
                    </light1>
                    <span>￥{{good.goodPrice}}</span>
                    <a href="javascript:void (0)" @click="Lists(good)"
                       style="width: 240px;height: 40px;display:block;
               overflow:hidden;text-overflow:ellipsis;"><p>{{good.goodName}}</p></a>
                    <em>
                        <a>收藏</a>
                        <a href="javascript:void (0)" @click="Lists(good)" class="add_scar">商品详情</a>
                    </em>
                </li>
            </ul>
        </div>

    </div>
</div>
    <!--网站地图-->
    <div class="fri-link-bg clearfix">
        <div class="fri-link">
            <div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81"/></div>
            <div class="left"><img src="images/qd.jpg" width="90" height="90"/>
                <p>扫描下载APP</p>
            </div>
            <div class="">
                <dl>
                    <dt>新手上路</dt>
                    <dd><a href="#">售后流程</a></dd>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">订购方式</a></dd>
                    <dd><a href="#">隐私声明 </a></dd>
                    <dd><a href="#">推荐分享说明 </a></dd>
                </dl>
                <dl>
                    <dt>配送与支付</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>售后保障</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">保险需求测试</a></dd>
                    <dd><a href="#">专题及活动</a></dd>
                    <dd><a href="#">挑选保险产品</a></dd>
                    <dd><a href="#">常见问题 </a></dd>
                </dl>
            </div>
        </div>
    </div>

    <!--网站页脚-->
    <div class="copyright">
        <div class="copyright-bg">
            <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
            <div class="hotline co-ph">
                <p>版权所有Copyright ©***************</p>
                <p>*ICP备***************号 不良信息举报</p>
                <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********

                    <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
            </div>
        </div>
    </div>

<!--侧边栏-->
<div class="toolbar">
    <a href="订单专区.html" class="toolbar-item toolbar-item-weixin" style=" position:relative">
        <!--<span class="toolbar-layer"></span>-->
    </a>
    <a href="###" class="toolbar-item toolbar-item-feedback"></a>
    <a href="###" class="toolbar-item toolbar-item-app">
        <span class="toolbar-layer"></span>
    </a>
    <a href="javascript:scroll(0,0)" class="toolbar-item toolbar-item-top"></a>
</div>

</body>
</html>

<script>
    var vm = new Vue({
        el: ".currency",
        data: {
            list: []
        },
        methods: {
            //ajax方式获取商品信息
            getGoodsList: function () {
                let vue_quote = this;
                //获取后台数据
                let url = "/good/searchGoods.do";

                let urlParam = getUrlParam("val");
                let data=urlParam;
                console.log(data);
                /**
                 * 发起post方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                postWithJson(url, data, function (resp) {
                    vue_quote.list = resp;
                    console.log(vue_quote.list)
                });
            },
            Lists : function (good) {
                location.href="goods_details.html?goodId="+good.goodId;
                return;
            }
        },
        /**
         * 页面加载完成，并且Vue对象加载完成之后回调该函数：mounted
         */
        mounted: function () {
            this.getGoodsList();
        }
    });


</script>